<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
			#box1{
<!--				border: solid red 1px;-->
				position:absolute;
				top:5%;
				left:0%;
				width:500px;
				height:400px;
			}
			#box2{
				border:   1px;
				position:absolute;
				top:5%;
				left:35%;
				width:500px;
				height:400px;
			}
			#box3{
				border:   1px;
				position:absolute;
				top:5%;
				right:0%;
				width:500px;
				height:400px;
			}
			#box4{
				border:  1px;
				position:absolute;
				top:60%;
				left:0%;
				width:500px;
				height:400px;
			}
			#box5{
				border:   1px;
				position:absolute;
				top:55%;
				left:32%;
				width:500px;
				height:400px;
			}
			#box6{
				border:   1px;
				position:absolute;
				top:55%;
				right:-5%;
				width:600px;
				height:400px;
			}

		</style>
    <script src="../static/js/echarts.min.js"></script>
	<!--    3d图形必须要导入这个库，否则不显示图形	-->
	<!-- 引入 echarts-gl 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
	<!--     导入词云组件	-->
	<script src="../static/js/echarts-wordcloud-2.1.0/dist/echarts-wordcloud.min.js"></script>
</head>
<body>
<div id="box">
			<div id="box1"></div>
			<div id="box2"></div>
			<div id="box3"></div>
			<div id="box4"></div>
			<div id="box5"></div>
			<div id="box6"></div>
		</div>
<!--   js代码	-->
	<script>
	//	3d柱状图
		//	初始化echarts
		var mychart1=echarts.init(document.getElementById("box1"));
		//	数据源
		var data1={{data1|tojson|safe}};
		//	将数据拆分，对应图形的列
		var x_data=[];
		var value_data=[];
		//	这里的key是数组里面的索引(0,1,3......)
		for(var key in data1){
			x_data.push(data1[key]['x']);
			value_data.push([
				data1[key]['x'],
				data1[key]['y'],
				data1[key]['z'],
			])
		};
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
		var option={
		//	显示标签
		 tooltip: {},
		//	标题
			title:{
				text:"每个区平均租金和平均面积参照图",
				left:"center",
				top:'8%',
				textStyle:{
					fontSize:16
				}
			},

			//	设置3d图形的网格属性
			grid3D: {
			    boxWidth: 150,
			    boxDepth: 100,
			    viewControl: {
			      // projection: 'orthographic'
			    },
			    light: {
			      main: {
			        intensity: 1.2,
			        shadow: true
			      },
			      ambient: {
			        intensity: 0.3
			      }
			    }
			  },
			  //	三条轴的设置
			  xAxis3D: {
    			type: 'category',
    			data: x_data,
    			name:'区域名',
    			 axisLabel: {
				            interval: 0, // 全部显示标签
				            rotate: 45, // 汉字倾斜显示
				            textStyle: {
				                fontSize: 12 // 调整字体大小
				            }
				        }

  				},
 			 yAxis3D: {
   				 type:'value',
   				 name:'平均租价'
   				 	},
  			zAxis3D: {
    			type: 'value',
    			name:'平均面积'
 				 },
			//	图形类型
		 series: [
			    {
			      type: 'bar3D',
			      data: value_data.map(function (item) {
			        return {
			          value: [item[0], item[1], item[2]]
			        };
			      }),
			      shading: 'lambert',
			      label: {
			        fontSize: 16,
			        borderWidth: 1
			      },
			      emphasis: {
			        label: {
			          fontSize: 20,
			          color: '#900'
			        },
			        itemStyle: {
			          color: '#900'
			        }
			      }
			    }
			  ]


		};

		//	展示图形
		mychart1.setOption(option);

		//	2.堆积图
		var mychart2=echarts.init(document.getElementById("box2"));
		//		处理数据
		var data2_0={{data2_0|tojson|safe}};
		var data2_1={{data2_1|tojson|safe}};
		//	遍历数据将x轴的值取出来
		var	x_data=[];
		for(var index in data2_0){
			x_data.push(data2_0[index]['x']);
		};
		//	将两条y轴的数据提取出来
		var y_data_0=[];
		var y_data_1=[];
		for(var index in data2_0){
			y_data_0.push(data2_0[index]['z']);
		};
		for(var index in data2_1){
			y_data_1.push(data2_1[index]['z']);
		};

		//	图形参数
		var option={
			//	标题
			 title: {
			    text: '每个区租房信息有无电梯数量对比图',
			    left:'center',
			    top:'0%',
			 	textStyle:{
					fontSize:16
				}
			  },
			  //	标签
			    legend: {
			      data: ['无电梯', '有电梯'],
			      left:'left',
			      top:'5%'
			    },
			  //	图例
			  tooltip: {
			    trigger: 'axis',
			    axisPointer: {
			      type: 'cross',
			      label: {
			        backgroundColor: '#6a7985'
			      }
			    }
			  },
			  //	x轴
			  xAxis:{
				  type:'category',
				  boundaryGap: false,
				 data:x_data,
				  axisLabel: {
				            interval: 0, // 全部显示标签
				            rotate: 45, // 汉字倾斜显示
				            textStyle: {
				                fontSize: 12 // 调整字体大小
				            }
				        }
			  },
			  //	y轴
			  yAxis:{
				  type:'value'
			  },
			  series:[
				  {
					  name:'无电梯',
					  type:'line',
					  stack:'Total',
					  areaStyle:{},
					  emphasis:{
						  focus:'series'
					  },
					  data:y_data_0
				  },
				  {
					  name:'有电梯',
					  type:'line',
					  stack:'Total',
					  areaStyle:{},
					  emphasis:{
					  		focus:'series'
					  },
					  data:y_data_1
				  }
			  ]

		}
		//	展示图形
		mychart2.setOption(option);

		//	环形图
		var mychart3=echarts.init(document.getElementById("box3"));
		//	处理数据
		var data3={{data3|tojson|safe}};
		dict_data=[];
		for(var index in data3){
			dict_data.push(data3[index]);
		};

		//	图形参数
		var option={
			 tooltip: {
			    trigger: 'item'
			  },
			 title:{
				 text:'每个区域有电梯和地铁的数量分布图',
				 left:'center'
			 },
			  legend: {
			     top: '5%',
			     left: 'center'
			   },
			   series:
			       {
			         name: '每个区域有电梯和地铁的数量分布图',
			         type: 'pie',
			         radius: ['60%', '20%'],
			         avoidLabelOverlap: false,
			         itemStyle: {
			           borderRadius: 10,
			           borderColor: '#fff',
			           borderWidth: 2
			         },
			         label: {
			           show: false,
			           position: 'right',
			            formatter: '{b}\n{d}%', // 使用换行符将百分比放在第二行
			            textStyle: {
					           fontSize: 9,
					           fontWeight: 'bold',
					           // 根据需要调整字体样式
					       }

			         },
			         emphasis: {
			           label: {
			             show: true,
			             fontSize: 40,
			             fontWeight: 'bold'
			           }
			         },
			         labelLine: {
			           show: false
			         },
			         data:dict_data
			       }

		};
		//	展示饼图
		mychart3.setOption(option);

		//	词云图
		var mychart4=echarts.init(document.getElementById("box4"));
		//	处理数据
		var data4={{data4|tojson|safe}};
		console.log(data4);
		// 配置词云的选项
        var option = {
        	title:{
						text:'租房型号数量占比词云图',
						left:'center',
						top:5
					},
            series: [{
                type: 'wordCloud',
                shape: 'circle',
                gridSize: 30,
                sizeRange: [10, 50], // 字体大小范围
                rotationRange: [-90, 90], // 旋转角度范围
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255)
                            ].join(',') + ')';
                        }
                    }
                },
                data: data4
            }]
        };
		//	展示图形4
		mychart4.setOption(option);

		//	矩形树图
		var mychart5=echarts.init(document.getElementById("box5"));
		//	处理数据
		var data5={{data5|tojson|safe}};
		//	将数据的格式换成矩形树图需要的格式(数组里面字典嵌套字典)
		data5_dict=[];
		for(var index in data5){
			data5_dict.push(
				{
					name:data5[index]['x'],
					value:30,
					children:[
						//	高于平均租金数量
						{
							name:'高于数量',
							value:data5[index]['y']
						},
						//	低于平均租金数量
						{
							name:'低于数量',
							value:data5[index]['z']
						}
					]
				}
			);
		};
		var option={
			title:{
				text:"每个区域高于和低于北京平均租金数量分布",
				left:'center'
			},
			series:{
				type:'treemap',
				data:data5_dict
			}
		}
		//	展示图形
		mychart5.setOption(option);

		//	横向柱状图
		var mychart6=echarts.init(document.getElementById("box6"));
		//	处理数据
		var data6={{data6|tojson|safe}};
		category_data=[];
		money_data=[];
		area_data=[];
		for(var index in data6){
			category_data.push(data6[index]['x']);
			money_data.push(data6[index]['y']);
			area_data.push(data6[index]['z']);
		};
		//	图形参数
		option = {
		  title: {
		    text: '北京租房最贵的小区的租金和面积情况',
			left:'center',
			top:8
		  },
		  tooltip: {
		    trigger: 'axis',
		    axisPointer: {
		      type: 'shadow'
		    }
		  },
		  legend: {left:'left'},
		  xAxis: {
		    type: 'value',
		    boundaryGap: [0, 0.01]
		  },
		  yAxis: {
		    type: 'category',
		    data:category_data,
		     axisLabel: {
				            interval: 0, // 全部显示标签
				            rotate: 40, // 汉字倾斜显示
				            textStyle: {
				                fontSize: 11 // 调整字体大小
				            }
				        }
		  },
		  series: [
		    {
		      name: '月租金',
		      type: 'bar',
		      data: money_data
		    },
		    {
		      name: '面积',
		      type: 'bar',
		      data: area_data
		    }
		  ]
		};
		//	展示横向柱状图
		mychart6.setOption(option);
	</script>
</body>
</html>